<!-- 我要承接 -->
<template>
  <client-only>
    <el-dialog
      v-model="visible"
      width="720px"
      title="我要承接"
      :z-index="1000"
      draggable
      :show-close="false"
      @close="resetForm"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="use-dialog-header">
          <div :id="titleId" :class="titleClass">我要承接</div>
          <div class="close">
            <el-icon @click="close">
              <CloseBold />
            </el-icon>
          </div>
        </div>
      </template>
      <div class="main">
        <el-form
          ref="formRef"
          class="form"
          label-position="top"
          label-width="110px"
          :model="formData"
          :rules="rules"
        >
          <el-form-item label="手机号：" prop="contactPhone">
            <el-input
              v-model="formData.contactPhone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码：" prop="smsValidateCode">
            <div class="flex-btw w-full">
              <el-input
                class="captcha"
                v-model="formData.smsValidateCode"
                placeholder="请输入验证码"
                clearable
              ></el-input>
              <send-code
                field="contactPhone"
                :params="{
                  phone: formData.contactPhone,
                  type: 'DEMAND_ACCEPT_RECORD',
                }"
                :elRef="formRef"
                :round="false"
              />
            </div>
          </el-form-item>
          <el-form-item label="姓名：" prop="contactName">
            <el-input
              v-model="formData.contactName"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="承接说明：" prop="acceptDesc">
            <el-input
              v-model="formData.acceptDesc"
              placeholder="请输详细描述"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              maxlength="200"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="btns">
          <div>
            <el-button round type="primary" @click="onSubmit">确定</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </client-only>
</template>

<script setup>
// 获取用户信息
const user = useStore.user();

const emit = defineEmits(["update"]);

const visible = ref(false);
const formData = reactive({
  contactPhone: "",
  acceptUserName: user.userInfo.actualName,
  acceptUserId: user.userInfo.employeeId,
  smsValidateCode: "",
});

const rules = {
  contactPhone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
  contactName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  smsValidateCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
  acceptDesc: [{ required: true, message: "请输入姓名", trigger: "blur" }],
};

const formRef = ref();
const onSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      api
        .post("/demandAcceptRecord/add", formData, { msg: true, loading: true })
        .then((res) => {
          resetForm();
        });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const show = (data) => {
  visible.value = !visible.value;
  formData.demandId = data.id;
  formData.demandCode = data.code;
};

const resetForm = () => {
  formRef.value.resetFields();
  visible.value = false;
};



defineExpose({ show });
</script>
<style lang="scss" scoped>
.main {
  margin: 0 90px;
}

.captcha {
  flex: 1;
  margin-right: 10px;
}

.toggle {
  .el-button--text {
    color: var(--use-color-warning);
    font-size: 16px;
  }
}

.btns {
  margin: 32px 0;

  .el-button {
    width: 100%;
    border-radius: 56px !important;
  }
}

.form {
  .label {
    display: inline-flex;
    align-items: center;

    .num {
      width: 18px;
      height: 18px;
      line-height: 18px;
      border-radius: 2px;
      background: var(--use-color-light-2);
      text-align: center;
      font-size: 12px;
      margin-right: 8px;
    }
  }
}

.send-code {
  height: 40px;
}

.tip {
  color: var(--use-color-danger);
}

::v-deep(.radioGroup) {
  .el-radio__input {
    display: none;
  }

  .el-radio {
    padding-right: 40px;
    margin-right: 12px !important;
  }

  .is-checked {
    border-color: #000;

    &::after {
      content: "";
      width: 24px;
      height: 24px;
      background: #000;
      clip-path: polygon(0 100%, 100% 0, 100% 100%);
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 0;
    }

    &::before {
      content: "✓";
      width: 13px;
      height: 20px;
      line-height: 24px;
      position: absolute;
      font-size: 12px;
      color: #fff;
      text-align: center;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
  }
}
</style>
